<template>
  <div class="moment" >
    <div class="moment-back" >
      <el-col :span="2" :xs="4" class="back" @click="routerBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-col>
      <el-col :span="20" :xs="8" class="tags">
        <template v-for="(item,index) in labels" :key="item.id">
          <el-tag >{{item.name}}</el-tag>
        </template>
      </el-col>
    </div>
    
    <div class="moment-detail">
      <div class="moment-detail-title" style="text-align: center; font-size: 20px;height: 50px;margin-bottom: 20px;font-weight: bolder;">
      {{title}}
      </div>
      <div class="moment-detail-content" v-html='content'></div>
      
      <div class="comment">
        <div v-for="item in comments" class="comment-content">
          <div class="comment-content-first" v-if="(item.commentId == null)" >
            <div class="avatar">
              <img :src="item.user.avatarUrl" alt="">
              <!-- <img src="@/assets/img/avatar.gif" alt=""> -->
              <div class="nickname">{{item.user.nickname}}</div>
              <div class="time">{{formatUTC(item.createTime)}}</div>
            </div>
            <div class="content">{{item.content}}</div>
            <div class="handle">
              <el-button class="handle-delete" text @click="deleteCommentById(item.id)">删除</el-button>
              <el-button class="handle-comment" text @click="dialogVisibleShow(item.id)">
                  评论
              </el-button>

                <el-dialog
                  v-model="dialogVisible"
                  title="回复评论"
                  width="30%"
                >
                  <el-input type="textarea" v-model="commentContent" />
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button type="primary" @click="dialogVisibleHandle( momentId)">
                        确定
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
            </div>
            <!-- 楼主--{{item.content}}--昵称{{item.user.nickname}} -->
          </div>


          <template v-for="itex in comments">
            <div class="comment-content-toFirst" v-if="(item.id == itex.commentId)">
              <div class="toFirstAvatar">
                <!-- <img src="@/assets/img/cat.gif" alt=""> -->
                <img :src="itex.user.avatarUrl" alt="">
                <div class="nickname">{{itex.user.nickname}}</div>
                <div class="time">{{formatUTC(itex.createTime)}}</div>
              </div>
              <!-- <img :src="itex.user.avatarUrl" alt=""> -->
              
              <div class="toFirstContent">{{itex.content}}</div>
            </div>
          </template>
        </div>
      </div>

    </div>

    <div class="participate ">
      <div class="participate-title">发表您的评论和建议</div>
      <el-input 
        type="textarea" 
        v-model="participateContent" 
        :autosize="{ minRows: 6, maxRows: 6 }"
        placeholder="请输入您想发表的内容"
      />
      <div class="btn-box">
        <el-button class="participate-btn" @click="participateHandleClick">发布</el-button>
      </div>
      
    </div>

    <!-- 锚点 -->
    <el-col :span="24" :xs="12" class="anchor">
      <a v-for="(item, index) in list" :class="index == listActive ? 'active': 'anchor-item' " :key="item.id" @click="listHandleClick(index)"  :href="item.id">{{item.text}}</a>
    </el-col>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import useStudyStore from '@/store/blog/study'
import { formatUTC } from '@/utils/format'
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { getMomentById } from '@/service/blog/study'
import { localCache } from '@/utils/cache';
import { LOGIN_TOKEN } from '@/global/constants'
import { onMounted } from 'vue'



const dialogVisible = ref(false)
const commentContent = ref()
const participateContent = ref()
const useStudy = useStudyStore()
const route = useRoute()
const router = useRouter()
const momentId = route.params.id
const commentId = ref()
const title = ref()
const content = ref()
const labels = ref()
const comments = ref()
useStudy.getMomentByIdAction(momentId).then(res => {
  // console.log(res.data.comments)
  title.value = res.data.title
  content.value = res.data.content
  labels.value = res.data.labels
  comments.value = res.data.comments
})

//删除评论
async function deleteCommentById(commentId: number) {
  // console.log(commentId)
  if( localCache.getCache(LOGIN_TOKEN)) {
    useStudy.removeCommentByIdAction(commentId)
    await getMomentById(momentId).then(res => {
        comments.value = res.data.comments
    })
    let result = await getMomentById(momentId)
    comments.value = result.data.comments
  }else {
    ElMessage({type: 'error', message:'请先登录'})
  }
  
}

//展示输入框
function dialogVisibleShow(id: number) {
  dialogVisible.value = true
  commentContent.value = ''
  // console.log(id)
  commentId.value = id
}

//回复评论
async function dialogVisibleHandle(momentId: any) {
  
  dialogVisible.value = false
  // console.log(commentContent.value)
  if( localCache.getCache(LOGIN_TOKEN)) {
    if(commentContent.value !== '' && commentContent.value !== undefined) {
      // console.log(comments)
      useStudy.commentByIdAction(commentId.value, momentId, commentContent.value)
      await getMomentById(momentId).then(res => {
          comments.value = res.data.comments
      })
      let result = await getMomentById(momentId)
      comments.value = result.data.comments
    }else {
      ElMessage({type: 'error', message:'评论不能为空'})
    }
    
  }else {
    ElMessage({type: 'error', message:'请先登录'})
  }
}

//发布按钮
async function participateHandleClick() {
  if(localCache.getCache(LOGIN_TOKEN)) {
    // console.log(participateContent.value)
    useStudy.participateCommentAction(momentId, participateContent.value)
    participateContent.value = ''
  }else {
    ElMessage({type: 'error', message:'请先登录'})
  }
  await getMomentById(momentId).then(res => {
          comments.value = res.data.comments
      })
  let result = await getMomentById(momentId)
  comments.value = result.data.comments
}

function routerBack() {
  router.push('/study')
}

const list = ref()

onMounted(() => {
  setTimeout(()=>{
    const hs:any = [] = document.querySelectorAll("h1,h2,h3,h4")
    // console.log(hs)
    list.value = Array.from(hs).map((h: any)=> {
      // console.log(h.childNodes)
      const [a, text] = h.childNodes
      return {
        id: '#' + a.id,
        text: text.data
      }
    })
  },1000)
})



let listActive = ref(0)

const listHandleClick = (index) => {
  listActive.value = index
}

</script>

<style lang="less" scoped>

.moment {
  box-shadow: 0 0 6px rgba(0,0,0,.2);
  margin-bottom: 20px;
  .tags {
    margin-left: 10px;
    display: flex;
    align-items: center;
    min-width: 150px;
    flex-wrap: wrap;
  }
  .el-tag {
    
    margin: 5px 5px;
  }
  .moment-back {
    display: flex;
    border-bottom: 1px solid #ccc;
  }
  .back {
    font-size: 20px;
    padding: 20px;
    cursor: pointer;
    color: #f95757;
    display: flex;
    align-items: center;
    &:hover {
      color: #409EFF;
    }
  }
  .moment-detail {
    color: #5c5d5f;
    padding: 20px;
    font-size: 12px;
    font-size: 14px;
    white-space:pre-wrap
  
 

  }

  .participate {
    padding: 20px;
    .participate-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 20px;
      color: #177392;
    }
    
    .btn-box {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      .participate-btn {
        background-color: #409EFF;
        color: #fff;
        &:hover {
          background-color: #7cb8f4;
        }
      }
    }
  }

  .anchor {
    position: fixed;
    right: 1%;
    bottom: 30%;
    display: flex;
    justify-content: left;
    flex-direction: column;
    border-left: 1px solid rgba(204, 204, 204, 0.697);
    padding-left: 10px;
  }
  .anchor-item {
    margin: 1px 0;
    &:hover {
      color:#409eff;
    }
  }
  .active {
    margin: 1px 0;
    color:#409eff;
  }
}



.comment {
      border-top: 2px solid rgb(36, 206, 48);
      padding: 20px;
      .comment-content {
        .comment-content-first {
          //发布的动态
          .avatar{
            display: flex;
            align-items: center;
            div {
              margin: 0 10px;
            }
            .nickname {
              color: #de5422;
              font-weight: bolder;
            }
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            .time {
              font-size: 12px;
            }
          }
          .content {
            padding: 0 45px;
          }
        }
        // 评论
        .comment-content-toFirst {
          padding: 20px 40px;
          .toFirstAvatar {
            display: flex;
            align-items: center;
            div {
              margin: 0 10px;
            }
            .nickname {
              color: #474dc1;
              font-weight: bolder;
            }
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            .time {
              font-size: 12px;
            }
          }
          .toFirstContent {
            padding: 10px 40px;
          }
        }
        .handle {
          display: flex;
          div{
            margin: 0 15px;
            font-size: 10px;
          }
          .handle-delete {
            color: #e3531e;
            &:hover{
              cursor: pointer;
            }
          }
          .handle-comment {
            color: #2d35c8;
            &:hover{
              cursor: pointer;
            }
          }
        }
      }
    }

</style>

